<%--
  Created by IntelliJ IDEA.
  User: 联想
  Date: 2020/3/30
  Time: 11:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery跟CSS3悬停悬停翻</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/externalLink/css/demo.css">

</head>
<body>

<div class="wrapper">
    <ul>
        <li>
            <div class='picBox'>
                <div class='show'>
                    <image height='180px' width='180px' src='${pageContext.request.contextPath}/static/externalLink/img/pic1.png'></image>
                </div>
                <div class='hide'>
                    <h3>
                        <a href="https://www.ncwu.edu.cn/">NCWU</a>
                    </h3>
                </div>
            </div>
        </li>
        <li>
            <div class='picBox'>
                <div class='show'>
                    <image height='180px' width='180px' src='${pageContext.request.contextPath}/static/externalLink/img/pic2.png'></image>
                </div>
                <div class='hide'>
                    <h3>
                        <a href="https://sec.ncwu.edu.cn/webvpn/">校图书馆</a>
                    </h3>
                </div>
            </div>
        </li>
        <li>
            <div class='picBox'>
                <div class='show'>
                    <image height='180px' width='180px' src='${pageContext.request.contextPath}/static/externalLink/img/pic3.png'></image>
                </div>
                <div class='hide'>
                    <h3>
                        <a href="http://ncwu.co.cnki.net/Login.html">校毕业设计管理系统</a>
                    </h3>
                </div>
            </div>
        </li>
        <li>
            <div class='picBox'>
                <div class='show'>
                    <image height='180px' width='180px' src='${pageContext.request.contextPath}/static/externalLink/img/pic4.png'></image>
                </div>
                <div class='hide'>
                    <h3>
                        <a href="https://www.cnki.net/">知网</a>
                    </h3>
                </div>
            </div>
        </li>
        <li>
            <div class='picBox'>
                <div class='show'>
                    <image height='180px' width='180px' src='${pageContext.request.contextPath}/static/externalLink/img/pic2-1.png'></image>
                </div>
                <div class='hide'>
                    <h3>
                        <a href="https://www.zhihu.com/signin?next=%2F">知乎</a>
                    </h3>
                </div>
            </div>
        </li>
        <li>
            <div class='picBox'>
                <div class='show'>
                    <image height='180px' width='180px' src='${pageContext.request.contextPath}/static/externalLink/img/pic2-2.png'></image>
                </div>
                <div class='hide'>
                    <h3>
                        <a href="https://www.csdn.net/">CSDN</a>
                    </h3>
                </div>
            </div>
        </li>
        <li>
            <div class='picBox'>
                <div class='show'>
                    <image height='180px' width='180px' src='${pageContext.request.contextPath}/static/externalLink/img/pic2-3.png'></image>
                </div>
                <div class='hide'>
                    <h3>
                        <a href="https://github.com/">github</a>
                    </h3>
                </div>
            </div>
        </li>
        <li>
            <div class='picBox'>
                <div class='show'>
                    <image height='180px' width='180px' src='${pageContext.request.contextPath}/static/externalLink/img/pic2-4.png'></image>
                </div>
                <div class='hide'>
                    <h3>
                        <a href="https://www.bilibili.com/">哔哩哔哩</a>
                    </h3>
                </div>
            </div>
        </li>
        <li>
            <div class='picBox'>
                <div class='show'>
                    <image height='180px' width='180px' src='${pageContext.request.contextPath}/static/externalLink/img/pic3-1.png'></image>
                </div>
                <div class='hide'>
                    <h3>
                        <a href="https://www.cnblogs.com/">博客园</a>
                    </h3>
                </div>
            </div>
        </li>
        <li>
            <div class='picBox'>
                <div class='show'>
                    <image height='180px' width='180px' src='${pageContext.request.contextPath}/static/externalLink/img/pic3-2.png'></image>
                </div>
                <div class='hide'>
                    <h3>
                       <a href="https://yz.chsi.com.cn/">研招网</a>
                    </h3>
                </div>
            </div>
        </li>
        <li>
            <div class='picBox'>
                <div class='show'>
                    <image height='180px' width='180px' src='${pageContext.request.contextPath}/static/externalLink/img/pic3-3.png'></image>
                </div>
                <div class='hide'>
                    <h3>
                        <a href="https://www.icourse163.org/">慕课</a>
                    </h3>
                </div>
            </div>
        </li>
        <li>
            <div class='picBox'>
                <div class='show'>
                    <image height='180px' width='180px' src='${pageContext.request.contextPath}/static/externalLink/img/pic3-4.png'></image>
                </div>
                <div class='hide'>
                    <h3>
                        <a href="http://www.1ketang.com/">壹课堂</a>
                    </h3>
                </div>
            </div>
        </li>
    </ul>
</div>

<script src="${pageContext.request.contextPath}/static/externalLink/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/externalLink/js/demo.js"></script>

</body>
</html>
